<template>
	<view class="main">
		<view class="card-bot">
			<view class="nav-item">
				<view class="left">

					<text>更换头像</text>
				</view>

				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6" multiple
					:maxCount="1" width="24" height="24">
					<view class="right-avatar">
						<view class="avatar">
							<image class="image" v-if="user.icon" :src="user.icon" mode="aspectFit"></image>
							<u-avatar text="A" v-else size="24" fontSize="12" randomBgColor></u-avatar>
						</view>
						<u-icon name="arrow-right" color="#333" size="16"></u-icon>
					</view>

				</u-upload>

			</view>
			<view class="nav-item" @tap="open">
				<view class="left">

					<text>修改昵称</text>
				</view>

				<u-icon name="arrow-right" color="#333" size="16"></u-icon>
			</view>

			<view class="nav-item" @tap="open1">
				<view class="left">
					<text>账号注销</text>
				</view>

				<u-icon name="arrow-right" color="#333" size="16"></u-icon>
			</view>

		</view>
		<view class="btn-logout" @click="submitForm">
			立即修改
		</view>

		<u-modal :show="show" @cancel="close" @confirm="confirm" :showCancelButton="true" :asyncClose="true"
			title="修改昵称">
			<view class="slot-content">
				<input class="ipt" v-model="nickname" type="text" placeholder="请输入昵称">
			</view>
		</u-modal>

		<u-modal @cancel="close1" @confirm="deleteAccount" :showCancelButton="true" :asyncClose="true" :show="isShow"
			title="账号注销" content='是否注销账号,注销账号后所有信息将会被清理,是否继续？'>
		</u-modal>
	</view>
</template>

<script>
	// import {
	// 	getUserInfo,
	// 	updateMemberInfo,
	// 	uploadImage
	// } from '../api/index.js'
	// import {
	// 	removeEmptyField
	// } from "../utils/removeForm.js"
	export default {
		data() {
			return {
				show: false,
				isShow: false,
				nickname: "",
				fileList: [],
				form: {
					id: "",
					nickname: "",
					icon: "",
					isdelete: ""
				},
				user: {}
			}
		},
		methods: {
			close() {
				this.show = false
			},
			open() {
				this.show = true
			},
			close1() {
				this.isShow = false
			},
			open1() {
				this.isShow = true
			},
			getList() {
				getUserInfo().then(res => {
					this.user = res
					this.nickname = res.nickname
				})
			},
			updateForm(item) {
				// updateMemberInfo(removeEmptyField(item)).then(res => {
				// 	uni.showToast({
				// 		icon: "none",
				// 		title: "修改成功"
				// 	})
				// 	// 获取当前页面栈
				// 	let pages = getCurrentPages();
				// 	this.fileList = []
				// 	let page = pages[pages.length - 1]; // 当前页
				// 	// 重新执行 onLoad
				// 	page.onLoad(page.options);
				// 	this.close()
				// 	this.close1()
				// 	this.getList()
				// })
			},

			deleteAccount() {
				// this.form.id = this.user.id
				// this.form.isdelete = 1
				// updateMemberInfo(removeEmptyField(this.form)).then(res => {
				// 	uni.showToast({
				// 		icon: "none",
				// 		title: "修改成功"
				// 	})

				// 	this.close1()
				// 	uni.removeStorageSync('token')
				// 	uni.removeStorageSync('user')
				// 	uni.removeStorageSync('car')
				// 	uni.removeStorageSync('choseCar')
				// 	uni.removeStorageSync('storeList')
				// 	uni.removeStorageSync('shopId')
				// 	uni.removeStorageSync('choseShop')
				// })
			},

			submitForm() {
				this.form.id = this.user.id
				this.updateForm(this.form)
			},

			confirm() {
				this.form.id = this.user.id
				this.form.nickname = this.nickname
				this.updateForm(this.form)
			},
			async afterRead(file) {
				// try {
				// 	const res = await uploadImage(file.file[0].url) // ✅ 直接传 file
				// 	this.form.icon = res
				// 	this.fileList = [{
				// 		url: res
				// 	}]
				// } catch (err) {
				// 	console.error('上传失败:', err)
				// }
			},
			deletePic() {
				this.fileList = []
			}
		},
		onLoad() {
			let user = uni.getStorageSync('carInfo')
			if (user) {
				this.getList()
			} else {
				uni.showModal({
					title: '提示',
					content: '当前还没有登录，请登录后使用？',
					showCancel: true, // 是否显示取消按钮
					cancelText: '取消', // 取消按钮的文字
					cancelColor: '#000000', // 取消按钮的颜色
					confirmText: '确定', // 确定按钮的文字
					confirmColor: '#3CC51F', // 确定按钮的颜色
					success: (res1) => {
						if (res1.confirm) {
							uni.navigateTo({
								url: "/pages/userPage/login/index"
							})
						} else if (res1.cancel) {
							console.log('用户点击了取消')
						}
					},
					fail: (err) => {
						console.log('调用失败', err);
					}
				});


			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 30rpx 30rpx;
		box-sizing: border-box;
	}

	.right-avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 57rpx;
		box-sizing: border-box;
	}

	.card-bot {
		width: 100%;
		min-height: 300rpx;
		background: #fff;
		border-radius: 10rpx;
		// margin-top: -40rpx;

		.nav-item {
			width: 100%;
			height: 80rpx;
			display: flex;
			margin-bottom: 10rpx;
			align-items: center;
			justify-content: space-between;
			color: #333;
			font-size: 28rpx;
			border-bottom: 1rpx solid #f6f6f6;

			.left {
				width: 80%;
				display: flex;
				align-items: center;

				.bto-icon {
					margin-right: 6rpx;
				}
			}

			.avatar {

				.image {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%
				}
			}

			&:nth-last-child(1) {
				border-bottom: none;
			}
		}
	}

	.btn-logout {
		margin-top: 25rpx;
		width: 100%;
		height: 80rpx;
		background: cornflowerblue;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
		background: #ff9900;
	}

	.box-center {
		width: 600rpx;
		min-height: 200rpx;
		border-radius: 10rpx;
		padding: 60rpx 30rpx 20rpx 30rpx;
		box-sizing: border-box;

		.tablx {
			width: 100%;
			display: flex;
			align-items: center;
			min-height: 80rpx;

			.ipt {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}

		.btn-box {
			width: 100%;
			height: 60rpx;
			background: #ff9900;
			color: #fff;
			font-size: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;
			border-radius: 10rpx;
		}
	}

	.slot-content {
		margin-top: 20rpx;

		.ipt {
			width: 100%;
			text-align: center;
			border-bottom: 1rpx solid #f6f6f6;
		}
	}
</style>